<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 430px;
			height: 300px;
			background: skyblue;
			overflow: hidden;
		}
		.box div{
			width: 100px;
			height: 100px;
			background: pink;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			text-align: center;
			line-height: 100px;
		}
		.box div:nth-child(4n){
			margin-right: 0;
		}
		.anim{
			margin-top: -110px;
			transition: all 0.5s;
		}
	</style>
</head>
<body>
	<div class="box">
		

	</div>
	<script type="text/javascript">
		let list = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

		let box = document.querySelector(".box")

		// 将20个小div渲染到页面上
		function dom(){
			for(let i = 0; i < list.length; i++){
				// let div = document.createElement("div")
				// 模板字符串 `字符串${变量}`
				box.innerHTML += `<div>${list[i]}</div>`
			}
		}
		dom()
		let time = null
		function fn(){
			time = setInterval(function(){
				// 将数组前四个放到最后
				for(let i = 0; i < 4; i++){
					list.push(list[i])
				}
				list.splice(0,4)
				console.log(list)

				// 给前四个加上向上推的效果
				let item = document.querySelectorAll(".box div")
				for(let i = 0; i < 4; i++){
					item[i].className = "anim"
				}

				// 等待过度之后，重新渲染页面
				setTimeout(function(){
					box.innerHTML = ""
					// 重新渲染页面
					dom()
				}, 500)
			},100)
		}
		fn()
	</script>
</body>
</html>